<template>
    <div class="head">
        <div class="he-toubu">
            <el-tabs v-model="activeName" @tab-click="handleClick" >
                <ul id="head">
                    <li>
                        <router-link to="/index/desk" class="desk">桌位列表</router-link>
                    </li>
                    <li>
                        <router-link to="#" class="desk">桌位类型</router-link>
                    </li>
                </ul>
                <el-button @click="dialogFormVisible = true">创建桌台</el-button>
                <el-dialog title="添加桌台" :visible.sync="dialogFormVisible" style="font-family: 微软雅黑">
                    <span style="font-family: 微软雅黑;font-size: 14px">分类名:</span><br/>
                    <el-input v-model="desk.deskName" placeholder="请输入分类名" class="text-input"></el-input>
                    <br/>
                    <el-button type="primary" class="btn-tj" @click="add">添加</el-button>
                </el-dialog>
            </el-tabs>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="deskTypeId"
                        label="编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="deskName"
                        label="分类名"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="dialogs= true,id(scope.row.clerkId)">编辑
                        </el-button>
                        <el-dialog title="修改信息" :visible.sync="dialogs">
                            <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove"
                            >
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="" class="up">
                            </el-dialog>
                            <span style="font-family: 微软雅黑;font-size: 14px">分类名:</span><br/>
                            <el-input v-model="input" placeholder="请输入分类名" class="text-input"></el-input>
                            <br/>
                            <el-button type="primary" class="btn-tj" >添加</el-button>
                        </el-dialog>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


    </div>
</template>

<script>
    export default {
        name: "DeskFication",
        data(){
            return{
                dialogs:false,
                dialogVisible:false,
                dialogFormVisible:false,
                tableData: [],
                cxData:{
                    name:null,
                    id:null
                },
                desk:{
                    deskName:null,
                    buId:1
                }
            }
        },
        mounted() {
            this.$axios.post("administration/desk-type/queryAll").then(response=>{
                if (response.data!=null){
                    this.tableData=response.data
                }
            })
        },
        methods:{
            add(){
                alert("1111")
                this.$axios.post("administration/desk-type/queryAdd",this.desk).then(response=>{
                    alert(response.data)
                    if (response.data!=0){
                        this.dialogFormVisible=false
                        alert("添加成功")
                    }
                })
            }

        }
    }
</script>

<style scoped>
    .head{
        width: 80vw;
    }
    .he-toubu{

        font-family: 微软雅黑;
        width: 300px;
    }
    .btn-tj{
        font-family: 微软雅黑;
        margin-top: 10px;
        width: 150px;
        margin-left: 0px;
    }
    .up{
        width: 300px;
        height: 300px;
    }
    .text-input{
        width: 150px;
    }
    .upda{
        text-align: center;
        font-family: 微软雅黑;
        font-size: 14px;
    }
</style>